<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="<%=basePath%>/lib/echarts/echarts.common.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lpro/echarts.util.js"></script>
<style type="text/css">
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}
	.index_theLeft li {
	    list-style: none;
	    position: relative;
		padding: 15px 0 15px 20px;
	    border-bottom: 1px solid #f9f9f9;
	    cursor: pointer;
	}
	.returnlink {
		margin-right: 30px;
    	cursor: pointer;
    	color: #18bbfc;
	}
	.index_theLeft li.active , .index_theLeft li:HOVER{
		background: #f9f9f9 !important;
		color: #333 !important;
	}
	
	.index_theLeft li span,.index_theLeft li h5{
		text-align: center;
		color: #333 !important;
	}
	
	.index_theLeft li.active, .index_theLeft li:HOVER {
		color: #333 !important;
  	}
	
	.dashboard-menu li{
		color: #333 !important;
	}
	
	.mapContainer{
		height: 550px;width:100%;padding-left:170px;
	}
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	.sceneList-info{
		margin-left: 0px;
/* 	    margin-right: 40px; */
	    padding-top: 10px;
	}
	h3{
		margin: 15px 0;
	}
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
/* 	    padding-bottom: 20px; */
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}
	.sensor_detail_title{
		padding: 15px 0;
	}
	.jui-echart{
		padding: 10px;
		border: 1px solid #dadada;
	}
	.detail-line{
		padding: 3px 0;
	}
	.span-btn{
		border: 1px solid #aaa;
    	padding: 1px 8px;
    	border-radius: 5px;
    	color:#666;
    	font-weight: 500 ;
    	margin-left: 2px;
    	cursor: pointer;
	}
	.span-btn.active {
		background: #aaa ;
		color: #fff;
	}
	.span-btn:HOVER{
		background: #aaa ;
		color: #fff;
	}
	.dashboard-menu li{
		display: none ;
	}
</style>
</head>
<body>
	<div>
		
		<div style="background: #ecf0f5;">
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<ul class="dashboard-menu scoll">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li onclick="forwardUrl('/iot/sensors_detail?id=${obj.id}&sid=${sceneId}')"  
						 <c:if test="${obj.id == sensorId}">
						 	 class="active"
						 </c:if> 
						 nid="${obj.node_id }"
						  sid="${obj.id}">
	                       <span class="icon-codepen"></span>&nbsp; <span style="color: #333;">${obj.name }</span>
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							
							<div class="pt-10 pl-5">
								<div class="clearfloat">
									<div class="clearfloat liner">
										<h4 class="pb-10" style="border-bottom: 2px solid #18bbfc">
											<span>传感器详情</span>
											<span class="float-right returnlink " onclick="returnBack()">返回  <span class="icon-sign-out"></span></span>
										</h4>
										
										<input type="hidden" class="sensor_id">
									</div>
									<div class="float-left" style="width:70%;">
										 <div class="sensor_detail_title">
										 	<span>数据图表</span>
										 	<span style="margin-left: 60%;" class="span-btn" onclick="searchData(this,0);">1H</span>
										 	<span class="span-btn" onclick="searchData(this,1);" >1D</span>
										 	<span class="span-btn" onclick="searchData(this,2);">本月</span>
										 	<span class="span-btn" onclick="searchData(this,3);">上月</span>
										 	<!-- <span class="span-btn" onclick="searchData(this,4);">更多</span> -->
										 </div>
										 <div id="main" class="jui-echart" style="width: 100%;height:260px;" 
										 	data-options="url:'/page/sensor/history?pageSize=100&paged=1',data:{sensor_id:'$.sensor_id$'} 
										 				,x:'atimestr',y:'sdata',type:'line',id:'main',beforeEchart:'beforeEchart' "   ></div>
										
									</div>
									<div class="float-left" style="width:20%;" >
										<div style="margin-left: 20px;padding-left: 5px;border-bottom: 1px solid #dadada;" class="sensor_detail_title">传感器信息</div>
										<div class="jui-detail_get" style="padding-top: 30px;margin-left: 30px;" data-options=" url:'/sensor?id=$.sensor_id$' "  >
											<div class="detail-line">
												<span>设备名称：</span>
												<span type-name="node_name" type-value='h'></span>
											</div>
											<div class="detail-line">
												<span>传感器名称：</span>
												<span type-name="name" type-value='h'></span>
											</div>
											<div class="detail-line">
												<span>传感器数值：</span>
												<span type-name="sdata" class="width-auto" type-value='h'></span> [&nbsp;<span type-name="measure_unit_type" class="width-auto"  type-value='ch'></span>&nbsp;]
											</div>
											<div class="detail-line">
												<span>传感器类型：</span>
												<span type-name="iot_sensor_type" type-value='ch'></span>
											</div>
										</div>
									</div>
								</div>
								<div class="mt-10">
									<div class="sensor_detail_title">触发器信息</div>
									<div id="init-table" class="jui-table"  config-option="'url':'/page/trigger',
												param:{from_sensor_id: '$.sensor_id$' },
												'columns':[
													{name:'序号','type':'seq','value':'seq','width':'4%'}, 
													{name:'名称','value':'name','width':'10%'},
													{name:'关联传感器','value':'from_sensor_name','width':'10%'},
													{name:'触发条件类型','type':'category','value':'iot_trigger_condition_type','width':'15%'}, 
													{name:'参数','value':'condition_params','width':'6%'}, 
													{name:'检测间隔（秒）','value':'trigger_inteval_time','width':'10%'}, 
													{name:'状态',value:'iot_trigger_status',type:'self',value_callback:'statusFunc' ,'width':'5%'},
													{ name:'操作', type:'self', value_callback :'value_function','width':'8%'}
													]" > 
									
									</div>
								</div> 
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
function returnBack(){
	forwardUrl("/iot/monitor?id=${sceneId}",1000);
}
		
function beforeEchart(obj,data){
	if(data.length>0){
		if(data[0].iot_sensor_type == 25){
			if(data[0].measure_unit_type == 21){
				obj.yunit='温度';
			}else if(data[0].measure_unit_type == 22){
				obj.yunit='湿度';
			}else if(data[0].measure_unit_type == 23){
				obj.yunit='光照';
			}else if(data[0].measure_unit_type == 71){
				obj.yunit='%';
			}
			obj.yunit_c=data[0].data.measure_unit_type;
		}else if(data[0].iot_sensor_type == 27||data[0].iot_sensor_type == 26){
			var tmp = data[0].data.measure_unit_type_value.split(",");
			obj.yunit='状态';
			obj.stepStyle=true;
			var option ={ yAxis: {
				name:obj.yunit,
				min: tmp[tmp.length-1].split(":")[0] ,
                max: tmp[0].split(":")[0],
                axisLabel : {
                	 formatter:function(value){
                		 var texts = [];
                		 for(var i=0;i<tmp.length;i++){
                			 if(value==tmp[i].split(":")[0]){
	                		 	texts.push(tmp[i].split(":")[1]);
	                		 }
                		 }
                		 return texts;
                	 }
	            }
			}};
			obj.option=option;
		}
	}
	obj.xunit='时间';
	return obj;
}
$(function(){
	$(".sensor_id").val(GetQueryString("id"));
	
	var nid =  $("li.active").attr("nid") ;
	$("li[nid*='"+nid+"']").show();
})
function value_function(data,seq){
	if(data.iot_trigger_status ==44 ){
		return "<button onclick='t_modify(this,"+data.id+",43)' class='button button-small border-blue'>启动</button> "+
		"<button onclick='t_delete(this,"+data.id+")' class='button button-small border-red'>删除</button>";				
	}else{
		return "<button onclick='t_modify(this,"+data.id+",44)' class='button button-small border-blue'>停用</button> "+
		"<button onclick='t_delete(this,"+data.id+")' class='button button-small border-red'>删除</button>";
	}
}

function value_function(data,seq){
	if(data.iot_trigger_status ==44 ){
		return "<span tag='启动' onclick='t_modify(this,"+data.id+",43)' class='self-icon icon-play'></span>"+
	       "<span tag='删除' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>";
	}else{
		return "<span tag='暂停' onclick='t_modify(this,"+data.id+",44)' class='self-icon icon-pause'></span>"+
	       "<span tag='删除' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>";
	}
}

function t_modify(obj,i,status){
	var data ={ id:i,iot_trigger_status:status};
	commonAjax("PUT",localUrl+"/trigger?id="+i, data,function(data){
		if(data.status == status_code.OK){
			tip("成功");
			setTimeout(function(){
				closeAll();
				$("#init-table").tableAdaptor();
			},1000)
		}else{
			tip(data.statusMsg);
		}
	});
}
function statusFunc(val,data,seq){
	if(val==44){
		return "<span class='red'>停止</span>";
	}else{
		return "<span class='blue'>正常</span>";
	}
}
function t_delete(obj,i){
	lcomfirm('是否确定删除该触发器？',function(){
		commonAjax("DELETE",localUrl+"/trigger?id="+i, "",function(){
			tip("删除成功");
			setTimeout(function(){
				closeAll();
				$("#init-table").tableAdaptor();
			},1000)
		});
	})
}
function searchData(obj,type){
	var object = {
		url:'/list/sensor/history',
		data:{sensor_id:'$.sensor_id$'} ,
		x:'atimestr',
		y:'sdata',
		type:'line',
		id:'main',
		beforeEchart:'beforeEchart'	
	} ;
	if(type == 4){
		tip("即将上线");
		return ;
	}else if(type == 0){
		var date = new Date();
		date.setHours(date.getHours()-1);
		object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss")  ;
		object.data["end_time"] =  (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
	}else if(type == 1){
		var date = new Date();
		date.setDate(date.getDate()-1);	
		object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
		object.data["end_time"] = (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
		object.data.query_interval_type = 2 ;
	}else if(type == 2){
		var date = new Date();
		date.setMonth(date.getMonth()-1);	
		object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
		object.data["end_time"] =  (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
		object.data.query_interval_type = 3 ;
	}else if(type == 3){
		var date = new Date();
		var lastMonth = new Date();
		date.setMonth(date.getMonth()-2);	
		lastMonth.setMonth((new Date()).getMonth()-1);	
		object.data["start_time"] =  date.Format("yyyy/MM/dd hh:mm:ss") ;
		object.data["end_time"] = lastMonth.Format("yyyy/MM/dd hh:mm:ss") ;
		object.data.query_interval_type = 3 ;
	}
	$(".span-btn").removeClass("active");
	$(obj).addClass("active");
	echart(object);
}

function echart(object){
	commonAjax( gdv(object.method,"POST") , 
			localUrl + format_property(object.url) , ( (object.method == 'GET')?'': (  objecter( gdv(object.data,{}),'$') )  ) ,function(data){
		if(data.status == status_code.OK){
			var dataTemp ;
			if(validater.empty(data.data)){
				return ;
			} 
			if( format_property(object.url).indexOf("paged")>-1  ){
				dataTemp = data.data.data ;					
			}else{
				dataTemp = data.data ;
			}
			var x_value =[];
			var y_value =[];
			for(var i=0;i< dataTemp.length; i++){
				x_value.push(dataTemp[dataTemp.length-i-1][object.x] );
				y_value.push(dataTemp[dataTemp.length-i-1][object.y])
			}
			object.x=x_value;
			object.y=y_value;
			if(!validater.empty(object.beforeEchart)){
				object = eval('('+ object.beforeEchart+'(object,dataTemp)' +')');
			}
			echartInit(object);
			if(!validater.empty(object.success) ){
				object.success();					
			}
		}else{
			tip("该时间段内，暂无数据");
		}
	});
}
</script>
</html>